<a (click)="edit()">
  <i nz-icon nzType="plus"></i>
  添加
</a>

<nz-row [nzGutter]="[8,8]" cdkDropList (cdkDropListDropped)="drop($event)">
  <div nz-col [nzSpan]="12" [nzXs]="24" [nzSm]="12" [nzMd]="12" [nzLg]="8" [nzXl]="6" [nzXXl]="4"
       *ngFor="let data of items; let i=index" cdkDrag>
    <nz-card nzSize="small" [nzTitle]="data.name" nzHoverable [nzExtra]="extraTemplate" (click)="edit(data)">
      <p>
        {{data.value}} {{data.compare}} {{data.value1}} {{data.value2}}
        <span *ngIf="data.delay">延迟{{data.delay}}ms</span>
        <span *ngIf="data.disabled">禁用</span>
      </p>
      <p>
        代号：{{data.code}}
        内容：{{data.message}}
        等级：{{data.level}}
      </p>
      <p>
        重置超时：{{data.reset_timeout}}ms
        重置次数：{{data.reset_total}}
      </p>
    </nz-card>
    <ng-template #extraTemplate>
      <a title="移动" cdkDragHandle>
        <i nz-icon nzType="drag" nzTheme="outline"></i>
      </a>
      <nz-divider nzType="vertical"></nz-divider>
      <a title="复制" (click)="copy(i); $event.stopPropagation()">
        <i nz-icon nzType="copy" nzTheme="outline"></i>
      </a>
      <nz-divider nzType="vertical"></nz-divider>
      <a title="删除" nz-popconfirm nzPopconfirmTitle="确定删除?" (nzOnConfirm)="remove(i)"
         (click)="$event.stopPropagation()">
        <i nz-icon nzType="delete" nzTheme="outline"></i>
      </a>
    </ng-template>
  </div>
</nz-row>

<nz-modal [(nzVisible)]="showModal" nzTitle="编辑计算器" (nzOnOk)="onOk()" (nzOnCancel)="showModal=false">
  <ng-container *nzModalContent>
    <form [formGroup]="formGroup">
      <nz-form-item>
        <nz-form-label [nzSpan]="5">变量</nz-form-label>
        <nz-form-control [nzSpan]="12" nzErrorTip="">
          <input nz-input formControlName="value" [nzAutocomplete]="auto"/>
          <nz-autocomplete #auto [compareWith]="compareFun">
            <nz-auto-option *ngFor="let pt of points" [nzValue]="pt.name" [nzLabel]="pt.name">
              {{pt.name}} - {{ pt.label }}
            </nz-auto-option>
          </nz-autocomplete>
        </nz-form-control>
      </nz-form-item>


      <nz-form-item>
        <nz-form-label [nzSpan]="5">对比</nz-form-label>
        <nz-form-control [nzSpan]="12" nzErrorTip="">
          <nz-select formControlName="compare" nzSize="small" required>
            <nz-option nzValue="=" nzLabel="等于"></nz-option>
            <nz-option nzValue="!=" nzLabel="不等于"></nz-option>
            <nz-option nzValue="<" nzLabel="小于"></nz-option>
            <nz-option nzValue="<=" nzLabel="不大于"></nz-option>
            <nz-option nzValue=">" nzLabel="大于"></nz-option>
            <nz-option nzValue=">=" nzLabel="不小于"></nz-option>
            <nz-option nzValue="><" nzLabel="之间"></nz-option>
            <nz-option nzValue="<>" nzLabel="之外"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="5">值1</nz-form-label>
        <nz-form-control [nzSpan]="12" nzErrorTip="">
          <nz-input-number formControlName="value1"></nz-input-number>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item *ngIf="formGroup.value.compare=='><' || formGroup.value.compare=='<>'">
        <nz-form-label [nzSpan]="5">值2</nz-form-label>
        <nz-form-control [nzSpan]="12" nzErrorTip="">
          <nz-input-number formControlName="value2"></nz-input-number>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="5">延迟ms</nz-form-label>
        <nz-form-control [nzSpan]="12" nzErrorTip="">
          <nz-input-number formControlName="delay"></nz-input-number>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="5">超时重置ms</nz-form-label>
        <nz-form-control [nzSpan]="12" nzErrorTip="">
          <nz-input-number formControlName="reset_timeout"></nz-input-number>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="5">超时重置次数</nz-form-label>
        <nz-form-control [nzSpan]="12" nzErrorTip="">
          <nz-input-number formControlName="reset_total"></nz-input-number>
        </nz-form-control>
      </nz-form-item>


      <nz-form-item>
        <nz-form-label [nzSpan]="5">报警内容</nz-form-label>
        <nz-form-control [nzSpan]="12" nzErrorTip="">
          <input nz-input formControlName="message" required/>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="5">报警代号</nz-form-label>
        <nz-form-control [nzSpan]="12" nzErrorTip="">
          <input nz-input formControlName="code" required/>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="5">报警等级</nz-form-label>
        <nz-form-control [nzSpan]="12" nzErrorTip="">
          <nz-input-number formControlName="level"></nz-input-number>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="5">禁用</nz-form-label>
        <nz-form-control [nzSpan]="12" nzErrorTip="">
          <nz-switch formControlName="disabled"></nz-switch>
        </nz-form-control>
      </nz-form-item>

    </form>
  </ng-container>
</nz-modal>

